﻿@{
    ViewBag.Title = "浏览器分析";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="col-md-12">

        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">浏览器使用分析</h3>
                
            </div>
            <div class="box-body">
                <div class="det_inner" id="browserAnalysis" style="height: 500px"></div>
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/lib/adminlte/plugins/echarts/echarts.js"></script>
<script src="~/Scripts/app/function.js"></script>
<script type="text/javascript">
    function UtilWindowHeightWidth() {
        var winW, winH;
        if (window.innerHeight) { // all except IE
            winW = window.innerWidth;
            winH = window.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // IE 6 Strict Mode
            winW = document.documentElement.clientWidth;
            winH = document.documentElement.clientHeight;
        } else if (document.body) { // other
            winW = document.body.clientWidth;
            winH = document.body.clientHeight;
        }
        return { WinW: winW, WinH: winH };
    };

    window.onload = function () {
        document.getElementById("browserAnalysis").style.minHeight = (UtilWindowHeightWidth().WinH - 220) + "px";
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('browserAnalysis'));
    var option = null;
    UtilAjaxPost("/System/Log/GetAnalysisForBrowser", {}, function (data) {
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '浏览器使用分析',
                x: 'center'
            },
            toolbox: {
                show: true,
                feature: {
                    restore: { show: true },
                    saveAsImage: { show: true },
                    dataView: { show: true },
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    }
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['Firefox', 'Chrome', 'InternetExplorer', '其他']
            },
            series: [
                {
                    //roseType:true,
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    }
    );
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

